<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-L-admin1.0</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="../../css/font.css">
        <link rel="stylesheet" href="../../css/xadmin.css">
        <link rel="stylesheet" href="../../css/layuiadmin.css">
    </head>
<body layadmin-themealias="default">

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">    
        <div class="layui-card">
          <div class="layui-card-header">
            最近通知
          </div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                  <p class="layui-text-center">我不知道要监控什么</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                    <p class="layui-text-center">我不知道要监控什么</p>
                    <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                  </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                  <p class="layui-text-center">我不知道要监控什么</p>
                  <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                 <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                   <p class="layui-text-center">我不知道要监控什么</p>
                   <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                 </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                 <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                   <p class="layui-text-center">我不知道要监控什么</p>
                   <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                 </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                 <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="https://www.layui.com/doc/modules/flow.html">进程顺畅</a></div>
                   <p class="layui-text-center">我不知道要监控什么</p>
                   <p class="layui-text-bottom"><a lay-href="https://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
                 </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">动态</div>
          <div class="layui-card-body">
            <dl class="layuiadmin-card-status">
              <dd>
                <div class="layui-status-img"><a href="javascript:;"><img src="../../images/logo.png"></a></div>
                <div>
                  <p>操作员 在 操作</p>
                  <span>几秒前</span>
                </div>
              </dd>
            </dl>  
          </div>
        </div>     
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">快速监控</div>
          <div class="layui-card-body">
            <div class="layuiadmin-card-link">
              <a href="javascript:;">监控一</a>
              <a href="javascript:;">监控二</a> 
              <a href="javascript:;">监控三</a> 
              <a href="javascript:;">监控四</a> 
              <a href="javascript:;">监控五</a> 
              <a href="javascript:;">监控六</a>
              <button class="layui-btn layui-btn-primary layui-btn-xs">
                <i class="layui-icon layui-icon-add-1" style="position: relative; top: -1px;"></i>添加
              </button>
            </div>        
          </div>
        </div>
       
        <div class="layui-card">
          <div class="layui-card-header">实时监控</div>
          <div class="layui-card-body layadmin-takerates">
                      <div class="layui-progress" lay-showpercent="yes">
                        <h3>系统使用率</h3>
                        <div class="layui-progress-bar" lay-percent="58%" style="width: 58%;"><span class="layui-progress-text">58%</span></div>
                      </div>
                      <div class="layui-progress" lay-showpercent="yes">
                        <h3>进程等待率</h3>
                        <div class="layui-progress-bar layui-bg-red" lay-percent="90%" style="width: 90%;"><span class="layui-progress-text">90%</span></div>
                      </div>
                    </div>
        </div>
      </div>
    </div>
  </div>

        <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style></body>
</html>